﻿@{
    ViewBag.SourceFiles = "~/wwwroot/res/js/gridcard.js";
    ViewBag.Title = "GridCard/Card";
    var F = Html.F();
}

@section head{
    <style>
        #Grid1 li {
            transition: all .3s;
        }

            #Grid1 li.f-grid-card-row {
                /*display:block;*/
                padding: 0px;
                border: none;
            }

            #Grid1 li .name {
                display: inline-grid;
                letter-spacing: 6px;
                width: 24px;
                overflow: hidden;
                height: 25px;
                text-align: center;
                padding: 5px;
                background: cornflowerblue;
                color: aliceblue;
                margin-right: 7px;
                font-weight: 600;
                padding-top: 3px;
            }

            #Grid1 li.f-grid-card-row.f-state-hover {
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            }

        #Grid1 .card {
            border: 1px solid #76b4ac;
        }

            #Grid1 .card .carhead {
                background-color: #eee;
                padding: 10px;
                font-weight: 600;
                border-bottom: 1px solid cornflowerblue;
            }

        #Grid1 table {
            margin: 5px;
        }
    </style>
}

@section body {

    注意样式，本页面样式，
    <br />注意修改了 ~/res/js/gridcard.js
    <br />注意修改了DataSourceUtil.GetDataTable 增加了背景图片数据
    @(F.Grid().IsFluid(true).Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name")
        .Height(700)
        //.IsViewPort(true)
        .DisplayType(GridDisplayType.Card).CardRendererFunction("renderCard")
        .Columns(
            F.RowNumberField(),
            F.RenderField().HeaderText("姓名").DataField("Name").Width(100),
            F.RenderField().HeaderText("Back").DataField("Back").Hidden(true),
            F.RenderField().HeaderText("性别").DataField("Gender").FieldType(FieldType.Int).RendererFunction("renderGender").Width(100),
            F.RenderField().HeaderText("入学年份").DataField("EntranceYear").FieldType(FieldType.Int).Width(100),
            F.RenderField().HeaderText("入学日期").DataField("EntranceDate")
                .FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").Width(150),
            F.RenderCheckField().HeaderText("是否在校").DataField("AtSchool").RenderAsStaticField(true).Width(100),
            F.RenderField().HeaderText("所学专业").DataField("Major").RendererFunction("renderMajor").ExpandUnusedSpace(true).MinWidth(150),
            F.RenderField().HeaderText("分组").DataField("Group").RendererFunction("renderGroup").Width(100),
            F.RenderField().HeaderText("注册日期").DataField("LogTime").FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").Width(100)
        )
        .DataSource(DataSourceUtil.GetDataTable())
    )
    <br>
    <br>

}

@section script {

    <script src="~/res/js/grid.js"></script>
    <script src="~/res/js/gridcard.js"></script>

}
